<template>

	
	<view :style="{
	fontSize:baseFSZ/20+'vw'
		}" v-if="currentinfo.QuestionStem">
		<view style="display: flex;align-items: center;border-bottom: 2rpx solid #e9e9e9;margin-top: 1vh;">
			<view style="width: 100%;">
	
				<view  
					style="display: flex;align-items: center;justify-content: space-between; width: 100%;font-size: 15px!important; box-sizing: border-box;margin: 1vh 0;">
		<view
			style="width: 3vw;height: 3vw;flex-shrink: 0; border-radius: 50%;background-color: #5d9cec;color: #fff;display: flex;align-items: center;justify-content: center;font-weight: bold;">
			{{currentinfo.SortNum}}
		</view>
		<view  v-html="parsedContent" style="width: 100%;display: flex;font-weight: bolder;margin-left: 10px;" 
		:style="{fontSize:baseFSZ/18+'vw!important'}"
		>

	
		</view>
					<view style="display: flex;width:6vw; align-items: center;justify-content: space-between;">
			<!-- 			<u-icon @click="collect()" name="star" :color="IsCollect?'red':'#5d9cec'" size="28"></u-icon>
						<u-icon :name="isNoVoice?'volume-off':'volume' "
							@click="speak(currentinfo.QuestionStem+currentinfo.QuestionStem)"
							color="#5d9cec" size="28"></u-icon> -->
	<!-- 		<image @click="collect()" :src="IsCollect?'../static/ysc.png':'../static/wsc.png'"  style="width: 24px;height: 24px;" mode=""></image>
				<image @click="speak(currentinfo.QuestionStem+currentinfo.QuestionStem)" :src="isNoVoice?'../static/jy.png':'../static/bf.png'"  style="width: 24px;height: 24px;" mode=""></image> -->
		<image v-if="IsCollect"  src="../static/hsc.png" @click="collect()"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
				<image v-else  src="../static/unsc.png" @click="collect()"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
		
		<image v-if="!isNoVoice" @click="speak(currentinfo.QuestionStem+currentinfo.QuestionStem)" src="../static/bf.png"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
				<image v-else @click="speak(currentinfo.QuestionStem+currentinfo.QuestionStem)" src="../static/jy.png"  style="width: 26px;height: 26px;flex-shrink: 0;" mode=""></image>
					</view>

				</view>

		

			</view>
		</view>
		
					<view   style="margin: 3vh 0;">
						<u--textarea @input='debouncedAnswerInput' v-model="AnswerContent" :maxlength='-1' placeholder="请点击此处输入内容" autoHeight
							style="min-height: 30vh;"></u--textarea>
					</view>
					<view   style="margin: 2vh 0;">
						<u-button text="提交" @click="handleSubmit()" color="#556b8d" style="width: 4vw;margin: 0 auto;"
							size="small"></u-button>
					</view>
			
	</view>	
	

</template>

<script>
	import {
		nFillInQuestion,
		Collect
	} from "../api/api.js"
	import {debounce} from "../utils/common.js"


	export default {
		name: "njdt",
		props: ['baseFSZ', 'currentinfo','isNoVoice'],
		data() {
			return {
				IsCollect: false,
				AnswerContent:null,
			};
		},
		computed: {
			parsedContent() {
				let content = this.currentinfo.QuestionStem;
				if (this.currentinfo.ImageUrl) {
		
					const baseUrl = `http://${uni.getStorageSync('config').ip}:${uni.getStorageSync('config').port}/Files/`;
					const imageUrls = this.currentinfo.ImageUrl.split(';').map(url => url.trim());
					const regex = /\{Image(\d+)\}/g;
					let match;
					
					while ((match = regex.exec(content)) !== null) {
						const index = parseInt(match[1], 10) - 1;
						if (index < imageUrls.length) {
							const imgTag = `<img src="${baseUrl}${imageUrls[index]}" alt="Image${index + 1}">`;
							content = content.replace(match[0], imgTag);
						}
					}
				}
				return `(${this.currentinfo.Score}分)${content}`;
			}
		},
		created() {
			this.IsCollect = this.currentinfo.IsCollect
			this.debouncedAnswerInput = debounce(this.handleInput, 500);
		},
		mounted() {

			this.AnswerContent=this.currentinfo.AnswerContent
		},
		methods: {
		handleInput(){
				this.handleSubmit({Id:this.currentinfo.Id})
		   
		},
			handleSubmit() {
		
				nFillInQuestion(this.currentinfo.Id, this.AnswerContent).then(res => {
		
				})
			},

			// previewPdf(url) {
			// 	let nurl = url.replace(/\.\.\/\.\.\//, uni.getStorageSync('config').address + '/')

			// 	uni.navigateTo({ //保留当前页面，跳转到应用内的某个页面
			// 		url: '/pages/webv/webv?url=' + nurl //带参跳转
			// 	})
			// },

			collect() {
				this.IsCollect = !this.IsCollect

				Collect(this.currentinfo.Id, this.IsCollect).then(res => {

				this.$emit('collect',this.IsCollect)
				})
			},
			speak(text) {

				// #ifdef APP-PLUS


				this.$emit('speaker', text)

				// #endif


			}

		}
	}
</script>

<style lang="scss">
	.normal {
		width: 1.6vw;
		height: 1.6vw;
		border-radius: 50%;
		border: 1px solid #bababa;
		position: relative;
		display: flex;
		align-items: center;
		margin-right: 1.6vw;
		justify-content: center;
		flex-shrink: 0;

		.ac {
			flex-shrink: 0;
			width: 1vw;
			height: 1vw;
			border-radius: 50%;
			background: #0075ff;

		}
	}
</style>